<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本选择器</title>
  <style>
    /*1. 标签选择器*/
    table{
      width: 600px;
      border-collapse: collapse;
      border: 2px gray solid;
      border-radius: 10px;
    }
    td{
      border:1px solid gray;
      padding: 6px;
    }
    /*2. 类别选择器（选择页面中想设置相同样式的元素）*/
    .tips{
      background-color: lightyellow;
      color: red;
      text-align: right;
    }
    .con{
      background-color: lightpink;
    }
    .footer{
      background-color: #add8e6;
      text-align: center;
    }
    .btn{
      width: 120px;
      padding: 6px 10px;
    }
    /*3. id选择器（选择页面中具有指定id的元素）*/
    #title{
      font-size: 25px;
    }
    /*三种基本选择器的优先级：
      id选择器 > 类别选择器 > 标签选择器
    */
    /*4. 属性选择器(中间逗号是并集选择器)*/
    /*4.1 选择页面中具有指定type属性的标签*/
    input[type="text"],input[type="password"] {
      background-color: lightyellow;
      border: 1px dotted gray;
      padding: 2px 3px;
      border-radius: 5px;
      color: blue;
    }
    /*4.2 选择页面中type属性以t结束的元素标签*/
    input[type$='t']{
      background-color: #ddd;
      border:1px solid gray;
      border-radius: 3px;
    }
  </style>
</head>
<body>
<table>
  <tr>
    <td colspan="2" align="center" height="40" bgcolor="#add8e6" id="title">
      学生注册
    </td>
  </tr>
  <tr>
    <td class="tips">
      姓名：
    </td>
    <td class="con">
      <input type="text" name="sname">
    </td>
  </tr>
  <tr>
    <td class="tips">
      性别：
    </td>
    <td class="con">
      <!--单选按钮：
         ① 一次只能选择一个选项，这里的name属性值必须一致，否则不能产生互斥性。
         ② 让某一项默认选中，可以使用checked属性。
         -->
      <input type="radio" name="sex" value="男" checked>男
      <input type="radio" name="sex1" value="女">女
    </td>
  </tr>
  <tr>
    <td class="tips">
      密码：
    </td>
    <td class="con">
      <input type="password" name="password" >
    </td>
  </tr>
  <tr>
    <td class="tips">
      爱好：
    </td>
    <td class="con">
      <!--复选框：
        ① 所有的name属性一致，提交到后台是一个数组，如：
          java-servlet中：
          String[] interests = request.getParameterValues("interest")
        ② 使用checked属性代表默认选择项。
        ③ 其中的value代表提交到后台的值。
      -->
      <input type="checkbox" name="interest" value="swim" checked>游泳
      <input type="checkbox" name="interest" value="game">游戏
      <input type="checkbox" name="interest" value="song">唱歌
      <input type="checkbox" name="interest" value="dancer">跳舞
      <input type="checkbox" name="interest" value="ball" checked>打球
    </td>
  </tr>
  <tr>
    <td class="tips">
      学历：
    </td>
    <td class="con">
      <!--下拉式列表框：
          ① multiple: 代表可以多选，要配合size属性，代表显示出来几个选项，可以结合ctrl键进行多选。
          ② option: 代表其中一个选择项，其中的value代表提交到后台的值，中间的代表显示在下拉框中的文本。
          ③ selected: 代表选中某一项或多项。
      -->
      <select name="xueli" multiple size="3">
        <option value="大专">大专</option>
        <option value="本科" selected>本科</option>
        <option value="硕士">硕士</option>
        <option value="博士">博士</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="tips">上传照片：</td>
    <td>
      <input type="file" name="phone" id="">
    </td>
  </tr>
  <tr>
    <td class="tips">工作经历：</td>
    <td class="con">
      <textarea name="intro"  cols="23" rows="4"></textarea>
      <!--隐藏域控件，主要负责在页面间传值-->
      <input type="hidden" name="sid" value="1001">
    </td>
  </tr>
  <tr>
    <td class="tips">常用按钮：</td>
    <td class="con">
      <!--
        普通按钮：用于人机交互
        图片按钮：用于提交表单
      -->
      <input type="button" value="普通按钮" onclick="alert('当前时间：' + new Date().toLocaleString())">
      <input type="image" src="../img/btn.png" alt="">
    </td>
  </tr>
  <tr>
    <td colspan="2" class="footer">
      <!--提交按钮：submit 可以将表单数据提交到后台-->
      <input type="submit" value="提交" class="btn">
      <!--重置按钮：reset 可以清空表单数据-->
      <input type="reset" value="重置" class="btn">
    </td>
  </tr>
</table>
</body>
</html>
